<template>
  <div class="add-second-wrap">
    <step />
    <!-- <el-row class="item-container">
      <div class="title">随时退：</div>
      <el-select v-model="info.able_return" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        />
      </el-select>
    </el-row> -->
    <el-row class="item-container">
      <div class="title">早餐：</div>
      <el-select v-model="info.breakfast" placeholder="请选择">
        <el-option
          v-for="item in breakfast"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        />
      </el-select>
      <div class="window">
        <div class="title">窗户：</div>
        <el-select v-model="info.has_window" placeholder="请选择">
          <el-option
            v-for="item in has_window"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </el-row>
    <el-row class="item-container">
      <div class="title">床数量：</div>
      <el-select v-model="info.bed_count" placeholder="请选择">
        <el-option
          v-for="item in bed_count"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        />
      </el-select>
      <div class="window">
        <div class="title">使用人数：</div>
        <el-select v-model="info.use_people" placeholder="请选择">
          <el-option
            v-for="item in use_people"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </el-row>
    <el-row class="item-container">
      <div class="item-left">
        <div class="title">房屋面积：</div>
        <el-input v-model="info.room_area" type="text" placeholder="请输入名称" class="input-container" />
        <p>m²</p>
      </div>
      <div class="item-right">
        <div class=" title-right title">楼层：</div>
        <el-input v-model="info.floor" type="text" placeholder="请输入名称" class="input-container" />
        <p>层</p>
      </div>
    </el-row>
    <el-row class="item-container">
      <div class="title">床：</div>
      <el-input v-model="info.bed" type="text" placeholder="请输入名称" class="input-container" />
      <div style="margin-left:70px" class=" title-right title">床面积：</div>
      <el-input v-model="info.bed_area" type="text" placeholder="请输入名称" class="input-container" />
    </el-row>
    <el-row class="item-container">
      <div class="title">其他参数：</div>
      <el-button type="primary" class="add-btn" @click="handleAddOther">新增</el-button>
    </el-row>
    <el-row class="item-container item-container-other">
      <div v-for="(item, index) of info.other" :key="index" class="item-left">
        <div class="title">名称：</div>
        <el-input v-model="item.key" type="text" placeholder="请输入名称" class="input-container" />
        <div class="title title-right">内容：</div>
        <el-input v-model="item.value" type="text" placeholder="请输入内容" class="input-container" />
        <el-button type="primary" style="margin-left: 20px" @click="handleDeleteOther(index)">删除</el-button>
      </div>
    </el-row>
    <el-row class="item-container">
      <div class="title">使用规则：</div>
      <el-input v-model="info.use_rule" type="textarea" placeholder="请输入简介" class="textarea-container" />
    </el-row>
    <el-row class="item-container">
      <div class="title">预定说明：</div>
      <el-input v-model="info.refund_rule" type="textarea" placeholder="请输入简介" class="textarea-container" />
    </el-row>
    <el-row class="item-container">
      <div class="title">可兑换房间：</div>
      <el-switch v-model="info.able_exchange" active-color="#13ce66" inactive-color="#ff4949" active-text="开启" inactive-text="关闭" />
    </el-row>
    <el-row class="item-container right">
      <el-button type="primary" class="add-btn finish-btn" @click="handleSubmit">完成</el-button>
    </el-row>
  </div>
</template>
<script>
import Step from '@/components/step'
import { getHotelJson, addHotel, editType } from '@/api/combo'

export default {
  name: 'HotelSecond',
  components: {
    Step
  },
  data() {
    return {
      info: {
        able_return: '支持',
        breakfast: '',
        has_window: '',
        floor: '',
        room_area: '',
        bed_count: '',
        use_people: '',
        bed: '',
        bed_area: '',
        use_rule: '',
        refund_rule: '',
        other: [
          {
            key: '',
            value: ''
          }
        ],
        able_exchange: 0
      },
      options: [
        {
          label: '0',
          value: '不支持'
        },
        {
          label: '1',
          value: '支持'
        }
      ],
      breakfast: [],
      has_window: [],
      bed_count: [],
      use_people: []
    }
  },
  created() {
    const info = JSON.parse(this.$route.query.info)
    if (!info) {
      this.$router.push('/merchandise/combo/hotel')
    } else {
      if (!Array.isArray(info.package_pics)) {
        info.package_pics = [info.package_pics]
      }
      if (info.id) {
        info.able_return = Number(info.able_return) === 1 ? '支持' : '不支持'
        info.other = info.other ? JSON.parse(info.other) : [{ key: '', value: '' }]
        info.able_exchange = Boolean(info.able_exchange)
        this.info = info
      } else {
        this.info = Object.assign({}, this.info, { ...info })
      }
    }
    this._getJson()
  },
  methods: {
    async _getJson() {
      const res = await getHotelJson()
      const { breakfast, has_window, bed_count, use_people } = res.data.hotel
      this.breakfast = this.createdData(breakfast)
      this.has_window = this.createdData(has_window)
      this.bed_count = this.createdData(bed_count)
      this.use_people = this.createdData(use_people)
    },
    createdData(array) {
      const result = []
      array.map((item, index) => {
        result.push({ label: index, value: item })
      })
      return result
    },
    handleSubmit() {
      // if (!Array.isArray(info.package_pics)) {
      //   info.package_pics = [info.package_pics]
      // }
      this.info.able_return = this.info.able_return === '支持' ? 1 : 0
      this.getOther()
      this.info.id ? this.edit() : this.add()
    },
    async add() {
      if (Array.isArray(this.info.package_pics)) {
        this.info.package_pics = this.info.package_pics.join('|')
      }
      const info = Object.assign({}, { ...this.info })
      info.other = info.other.length > 0 ? JSON.stringify(info.other) : ''
      info.able_exchange = info.able_exchange ? 1 : 0
      try {
        await addHotel({ ...info })
        this.$message.success({
          message: '添加成功',
          duration: 1000
        })
        setTimeout(() => {
          this.$router.push({
            path: '/merchandise/combo/hotel'
          })
        }, 1000)
      } catch (res) {
        this.$message.error({
          message: res.msg,
          duration: 1000
        })
      }
    },
    async edit() {
      this.info.package_id = this.info.id
      if (Array.isArray(this.info.package_pics)) {
        this.info.package_pics = this.info.package_pics.join('|')
      }
      const info = Object.assign({}, { ...this.info })
      info.other = info.other.length > 0 ? JSON.stringify(info.other) : ''
      info.able_exchange = info.able_exchange ? 1 : 0
      try {
        await editType({ ...info })
        this.$message.success({
          message: '修改成功',
          duration: 1000
        })
        setTimeout(() => {
          this.$router.push({
            path: '/merchandise/combo/hotel'
          })
        }, 1000)
      } catch (res) {
        this.$message.error({
          message: res.msg,
          duration: 1000
        })
      }
    },
    // 添加其他
    handleAddOther() {
      this.info.other.push({ key: '', value: '' })
    },
    // 删除其他
    handleDeleteOther(index) {
      this.info.other.splice(index, 1)
    },
    getOther() {
      this.info.other.map((item, index) => {
        if (item.key.toString().trim() === '' || item.value.toString().trim() === '') {
          this.info.other.splice(index, 1)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.add-second-wrap {
  width: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
  .item-container{
    width: 100%;
    display: flex;
    // align-items: center;
    margin-bottom: 15px;
    .title{
      font-size: 14px;
      line-height: 30px;
      width: 100px;
    }
    .title-right{
      margin-left: 40px;
    }
    .management-btn{
      margin-left: 15px;
    }
    .input-container{
      width: 400px;
    }
    .textarea-container{
      width: 40%;
    }
    .window {
      display: flex;
      align-items: center;
      margin-left: 40px;
    }
    .item-left,.item-right{
      display: flex;
      align-items: center;
      p {
        margin-left: 10px;
      }
    }
    .add-btn {
      width: 200px;
    }
    .finish-btn {
      margin: 0 auto;
    }
  }
  .right{
    justify-content: flex-end;
  }
  .item-container-other{
    flex-direction: column;
    .item-left{
      margin-bottom: 10px;
    }
  }
}
</style>
